body {
  /* --bckIMG: url('./static/img/bgi.jpg'); */

  /* theme-1 春风绿 */
  --BGD-1: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  --BGD-r-1: linear-gradient(300deg, #427b5a 0%, #466e71 100%);
  --BGD-r-brt: 1;
  --blur: 0px;

  /* theme-2 海底蓝 */
  --BGD-2: linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%);
  --BGD-r-2: linear-gradient(to right,
      #262d4a 0%,
      #1f485c 31%,
      #1d5958 100%);
  ;

  /* theme-3 青褐灰 */
  --BGD-3: linear-gradient(to right, #a8caba 0%, #5d4157 100%);
  --BGD-r-3: linear-gradient(to right, #383339 0%, #53635c 100%);

  /* theme-4 深蓝灰 */
  --BGD-4: linear-gradient(to left, #d7d2cc 0%, #304352 100%);
  --BGD-r-4: linear-gradient(to right, #383339 0%, #53635c 100%);

  /* theme-3 海洋蓝 */
  --BGD-5: linear-gradient(-225deg, #2CD8D5 0%, #6B8DD6 48%, #8E37D7 100%);
  --BGD-r-5: linear-gradient(-45deg,
      #19686a 0%,
      #3f2f6b 50%,
      #38416b 100%);
  width: 100%;
  height: 105vh;
  position: relative;
  background: linear-gradient(120deg, #386849 0%, #486b7c 100%);
  /* background: var(--BGD-1); */
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  backdrop-filter: blur(30px) brightness(1);
  transition: .3s;
  position: relative;
  overflow: hidden;
}

body::before {
  content: '';
  width: 150%;
  height: 150%;
  background: var(--BGD-r-1);
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  filter: brightness(var(--BGD-r-brt)) blur(var(--blur));
  transition: .3s;
  -webkit-transition: .3s;
  position: absolute;
  left: -5%;
  top: -5%;
  z-index: -1;
}


@media screen and (max-width: 1000px) {
  body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  body::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 120% auto;
    outline: 20px solid #000;
  }
}

@media screen and (max-width: 600px) {
  body::before {
    background-size: auto 100%;
  }
}
